<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../public/public.jsp"%>
<%@ include file="../public/buttons.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>

<script type="text/javascript">
   
   	$(function () {
	    // 查询
		$('#010201').click(function() {
			$('#tt').datagrid({
		        animate: true,        //是否动画展开折叠
		        checkbox: false, //全选复选框
		        checkOnSelect: true, //选中复选框的同时选中行
		        selectOnCheck: true, //选中行的同时选中复选框
		        singleSelect: true, //是否单选
		        collapsible: true,    //是否可折叠
		        height: 'auto',  //自动高度
		        iconCls: 'icon-save',  //样式图标
		        idField: 'role_id',   //主索引，唯一标识字段
		        //loadMsg: '数据载入中，请稍候……',
		        maximizable: true,
		        nowrap: true,  //截断内文
		        pagination: true, //分页
		        pageList: [10,20,30,40,50],
		        rownumbers: true,   //是否显示列数,
			    url: '${ctx}/sysRole/roleList.do',
			    frozenColumns: [[
					{field:'role_id',title:'唯一id',hidden:true},       
					{field:'ck',checkbox:true},
		   	        {field:'role_name',title:'角色名称',width:200}	   	        
		   	    ]],
			    columns: [[
				    {field:'create_time',title:'创建时间',width:200,
				    	formatter:function (value) {
					        return value == null ? '' : (new Date(value).format('yyyy-MM-dd hh:mm:ss'));
					    }
				    }
			    ]],
			    onBeforeLoad: function (param) {
			    	param.role_name = $('#role_name').searchbox('getValue');
		        },
		        onLoadSuccess: function (result){
		        	if(!result.success){
			        	$.messager.alert('操作提示', result.opMsg, 'warning');
		        	}	
		        },
		        onDblClickRow:function(rowIndex, rowData)
				{
		        	$('#w_viewRole').window('open');
		        	$('#f_viewRole').form('load',rowData);
		        	//ajax获得对应的绑定菜单
		        	var params = {};
		    		params.role_id = rowData.role_id;
		    		$.post('${ctx}/sysRole/bindedMenus.do', params, function(result) {
		    			if (result.success) {
		    				$('#viewRole_bindedMenus').val(result.data.menuNames);
		    			}
		    			if(result.success == false){
		    				$.messager.alert('操作提示', result.opMsg, 'warning');
		    			}
		    		});
				}
			});
			reset_pagenum($('#tt'));//重置当前页为1
		});
		$('#010201').click();//加载数据
		
		$('#addRole_btnOk').click(function () { 
		    save_addRole();
		});
		$('#addRole_btnCancel').click(function () {
			clean_add_form();
		    $('#w_addRole').window('close');
	    }); 
		$('#editRole_btnOk').click(function () { 
		    save_editRole();
		});
		$('#editRole_btnCancel').click(function () {
			clean_edit_form();
		    $('#w_editRole').window('close');
	    }); 
    });
   
	function addRole() {
		$('#w_addRole').window('open');
		loadTree();
	}
	
	function save_addRole()
	{
		if (!$('#add_role_name').validatebox('isValid')
				|| !$('#userForMenuSel').validatebox('isValid')) {
			return false;
		}
		var params = {};
		params.role_name = $('#add_role_name').val();
		params.remarks = $('#add_remarks').val();
		params.selectMenu = $('#selectMenu').val();
		$.post('${ctx}/sysRole/addRole.do', params, function(result) {
			if (result.success) {
				clean_add_form();
				$('#w_addRole').window('close');
				$.messager.alert('操作提示', result.opMsg, 'info');
				reload_dg($('#tt'));//刷新列表
			}
			if(result.success == false){
				$.messager.alert('操作提示', result.opMsg, 'warning');
			}
		});
	}
	
	function deleteRole(){
	    var row = $('#tt').datagrid('getSelected');
	    if (row){
	    		$.messager.confirm('操作提示','确定删除？',function(f) {
	    		    if (f) {
	    		    	$.ajax({
		  					  type : 'post',
		  					  url : '${ctx}/sysRole/deleteRole.do?role_id='+row.role_id,
		  					  success:function(result){
		  						  if(result.success){
		  							  $.messager.alert('操作提示', result.opMsg,'info');
			  						  reload_dg($('#tt'));//刷新列表 
		  						  }
		  						  if(result.success==false){
		  							  $.messager.alert('操作提示', result.opMsg,'warning');
		  						  }
		  					  }
		  				  });
	    		    }
	    		    else {
	    				return;
	    		    }
	    		});
	    }else{
	    	$.messager.alert('操作提示','请选择需要删除的角色！','warning');
	    	return;
	    }
   }
	
   function editRole(){
	    var row = $('#tt').datagrid('getSelected');
	    if (row){
	    	$('#w_editRole').window('open');
	    	$('#f_editRole').form('load',row);
	    	//ajax获得对应的绑定菜单
        	var params = {};
    		params.role_id = row.role_id;
    		$.post('${ctx}/sysRole/bindedMenus.do', params, function(result) {
    			if (result.success) {
    				$('#userForMenuSel_edit').val(result.data.menuNames);
    				$('#selectMenu_edit').val(result.data.menuIds);
    				loadTree_edit();
    			}
    			if(result.success == false){
    				$.messager.alert('操作提示', result.opMsg, 'warning');
    			}
    		});
	    }else{
	    	$.messager.alert('操作提示','请选择需要修改的角色！','warning');
	    	return;
	    }
   }
   
   function save_editRole()
	{
		if (!$('#edit_role_name').validatebox('isValid')
				|| !$('#userForMenuSel_edit').validatebox('isValid')) {
			return false;
		}
		var params = {};
		params.role_id = $('#tt').datagrid('getSelected').role_id;
		params.role_name = $('#edit_role_name').val();
		params.remarks = $('#edit_remarks').val();
		params.selectMenu = $('#selectMenu_edit').val();
		$.post('${ctx}/sysRole/editRole.do', params, function(result) {
			if (result.success) {
				clean_edit_form();
				$('#w_editRole').window('close');
				$.messager.alert('操作提示', result.opMsg, 'info');
				reload_dg($('#tt'));//刷新列表
			}
			if(result.success == false){
				$.messager.alert('操作提示', result.opMsg, 'warning');
			}
		});
	}
   
   function clean_add_form()
   {
	   $('#add_role_name').val('');
	   $('#userForMenuSel').val('');
	   $('#selectMenu').val('');
	   $('#add_remarks').val('');
   }
   
   function clean_edit_form()
   {
	   $('#edit_role_name').val('');
	   $('#userForMenuSel_edit').val('');
	   $('#selectMenu_edit').val('');
	   $('#edit_remarks').val('');
   }
</script>
<script type="text/javascript">
	  	var setting = {
		    check: {
				enable: true,
				chkStyle: "checkbox",
		        chkboxType: { "Y":"ps", "N":"ps"  }
			},
			callback: {
				onCheck: onCheckForBusiness
			},
			async: {
				enable: true,
				url:"${ctx}/sysRole/ztreeMenus.do",
				dataType: "json",
				dataFilter: null
			},
			data: {
				simpleData: {
					enable: true,
					pIdKey: "parentId",
				}
			}
		};
		function onCheckForBusiness(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeForMenu");
			nodes = zTree.getCheckedNodes(true);
			id = "";
			name = "";
			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
			    id += nodes[i].id + ",";
				name += nodes[i].name + ",";
			}
			if (name.length > 0 ) name = name.substring(0, name.length-1);
			if (id.length > 0 ) id = id.substring(0, id.length-1);
			var selObj = $("#userForMenuSel");
			selObj.attr("value", name);
			$("#selectMenu").val(id);
			$("#userForMenuSel").focus();
		}
		function loadTree(){
        	$.fn.zTree.init($("#treeForMenu"), setting);
		}
		function showMenu() {
			var selObj = $("#userForMenuSel");
			var businessOffset = $("#userForMenuSel").offset();
			$("#menuContentForMenu").css({left:businessOffset.left -343 + "px", top:businessOffset.top -384 + selObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDownForBusiness);
		}
		function hideMenu() {
		    $("#menuContentForMenu").fadeOut("fast");
		}
		function onBodyDownForBusiness(event) {
			if (!(event.target.id == "menuBtnForMenu" || event.target.id == "menuContentForMenu" || $(event.target).parents("#menuContentForMenu").length>0)) {
				hideMenu();
			}
		}
		
</script>
<script type="text/javascript">
		function onCheckForBusiness_edit(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeForMenu_edit");
			nodes = zTree.getCheckedNodes(true);
			id = "";
			name = "";
			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
			    id += nodes[i].id + ",";
				name += nodes[i].name + ",";
			}
			if (name.length > 0 ) name = name.substring(0, name.length-1);
			if (id.length > 0 ) id = id.substring(0, id.length-1);
			var selObj = $("#userForMenuSel_edit");
			selObj.attr("value", name);
			$("#selectMenu_edit").val(id);
			$("#userForMenuSel_edit").focus();
		}
		function loadTree_edit()
		{
			var cur_role_id = $('#tt').datagrid('getSelected').role_id;
			var setting_edit = {
				    check: {
						enable: true,
						chkStyle: "checkbox",
				        chkboxType: { "Y":"ps", "N":"ps"  }
					},
					callback: {
						onCheck: onCheckForBusiness_edit
					},
					async: {
						enable: true,
						url:"${ctx}/sysRole/ztreeEditMenus.do?role_id=" + cur_role_id ,
						dataType: "json",
						dataFilter: null
					},
					data: {
						simpleData: {
							enable: true,
							pIdKey: "parentId",
						}
					}
			};
        	$.fn.zTree.init($("#treeForMenu_edit"), setting_edit);
		}
		function showMenu_edit() {
			var selObj = $("#userForMenuSel_edit");
			var businessOffset = $("#userForMenuSel_edit").offset();
			$("#menuContentForMenu_edit").css({left:businessOffset.left -343 + "px", top:businessOffset.top -384 + selObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDownForBusiness_edit);
		}
		function hideMenu_edit() {
		    $("#menuContentForMenu_edit").fadeOut("fast");
		}
		function onBodyDownForBusiness_edit(event) {
			if (!(event.target.id == "menuBtnForMenu_edit" || event.target.id == "menuContentForMenu_edit" || $(event.target).parents("#menuContentForMenu_edit").length>0)) {
				hideMenu_edit();
			}
		}
		
</script>
</head>
<body>
		<div class="easyui-panel" title="角色管理">
		<div id="querybar" style="padding-top:10px;padding-bottom:10px;">
		    <table cellspacing="0" cellpadding="0">
				<tr>
					<td>&nbsp;查询条件：</td>
					<td>
						<input id="role_name" class="easyui-searchbox" data-options="prompt:'角色名称'"></input>
					</td>
					<td>&nbsp;</td>
					<td>
						<a href="javascript:void(0)" class="easyui-linkbutton" id="010201" style="display:none;" iconCls="icon-search" plain="true">查询</a>
					</td>
				</tr>
			</table>
        </div>
        <div id="toolbar">
	        <a href="javascript:void(0)" class="easyui-linkbutton"  id="010203" style="display:none;" iconCls="icon-add" plain="true" onclick="addRole()">新增</a>
	        <a href="javascript:void(0)" class="easyui-linkbutton"  id="010205" style="display:none;" iconCls="icon-edit" plain="true" onclick="editRole()">修改</a>
	        <a href="javascript:void(0)" class="easyui-linkbutton"  id="010207" style="display:none;" iconCls="icon-delete" plain="true" onclick="deleteRole()">删除</a>
    	</div>
	    <form id="ff" method="post" style="padding-top:10px;padding-bottom:10px;">
		    <table id="tt" toolbar="#toolbar"></table>
	    </form>
	    <%-- 新增角色window --%>
	    <div id="w_addRole"  class="easyui-window"  data-options="title:'新增角色',maximizable:false,closed:true,minimizable:false,collapsible:false,width:550,modal:true,resizable:false">
			<div style="margin-top:20px;margin-left:20px;" width="100%" cellspacing="0" cellpadding="0">
			    <div class="fitem">
                	<label>角色名称</label>
		        	<input class="easyui-validatebox" type="text" id="add_role_name" data-options="required:true"></input>
           		</div>
           		<div class="fitem">
                	<label>绑定菜单</label>
      				<textarea class="easyui-validatebox" style="height:100px;width:180px;" id="userForMenuSel"  name="userForMenuSel" readonly="true" data-options="required:true"></textarea>
      				<a id="menuBtnForMenu" onclick="javascript:showMenu();" href="javascript:void(0);">&nbsp;选择</a>
      				<div id="menuContentForMenu" style=" border:1px solid #ccc;width:198px;height:240px;overflow:scroll;scroll-y;display:none;position: absolute; background-color:#fcfcfc;">
						<ul id="treeForMenu" class="ztree"	style="margin-top: 0; width: 140px;"></ul>
  					</div>
  					<input type="hidden" id="selectMenu" />
           		</div>
           		<div class="fitem">
                	<label>备注</label>
		        	<textarea style="height:70px;width:180px;" id="add_remarks"></textarea>
           		</div>
			</div>
			<div style="padding-left:110px;padding-top:10px;">
				<a href="javascript:void(0);" id="addRole_btnOk" class="easyui-linkbutton" iconCls="icon-ok" >保存</a>
				<a href="javascript:void(0);" id="addRole_btnCancel" class="easyui-linkbutton" iconCls="icon-cancel" >取消</a>
			</div>
	    </div>
	    <%-- 双击查看角色window --%>
	    <div id="w_viewRole"  class="easyui-window"  data-options="title:'查看角色',maximizable:false,closed:true,minimizable:false,collapsible:false,width:550,modal:true,resizable:false">
			<form id="f_viewRole" method="post" novalidate>
			<div style="margin-top:20px;margin-left:20px;" width="100%" cellspacing="0" cellpadding="0">
			    <div class="fitem">
                	<label>角色名称</label>
		        	<input class="easyui-validatebox" type="text"  name="role_name" readonly="true" ></input>
           		</div>
           		<div class="fitem">
                	<label>绑定菜单</label>
                	<textarea class="easyui-validatebox" style="height:100px;width:280px;" id="viewRole_bindedMenus" readonly="true"></textarea>
           		</div>
           		<div class="fitem">
                	<label>备注</label>
		        	<textarea style="height:70px;width:280px;" name="remarks" readonly="true"></textarea>
           		</div>
			</div>
			<div style="padding-left:290px;padding-top:10px;">
				<a href="javascript:void(0);" class="easyui-linkbutton" onClick="javascript:$('#w_viewRole').window('close');" iconCls="icon-undo" >返回</a>
			</div>
			</form>
	    </div>
	    <%-- 修改角色window --%>
	    <div id="w_editRole"  class="easyui-window"  data-options="title:'修改角色',maximizable:false,closed:true,minimizable:false,collapsible:false,width:550,modal:true,resizable:false">
			<form id="f_editRole" method="post" >
			<div style="margin-top:20px;margin-left:20px;" width="100%" cellspacing="0" cellpadding="0">
			     <div class="fitem">
                	<label>角色名称</label>
		        	<input class="easyui-validatebox" type="text" id="edit_role_name" name="role_name" data-options="required:true"></input>
           		</div>
           		<div class="fitem">
                	<label>绑定菜单</label>
      				<textarea class="easyui-validatebox" style="height:100px;width:180px;" id="userForMenuSel_edit"  name="userForMenuSel_edit" readonly="true" data-options="required:true"></textarea>
      				<a id="menuBtnForMenu_edit" onclick="javascript:showMenu_edit();" href="javascript:void(0);">&nbsp;选择</a>
      				<div id="menuContentForMenu_edit" style=" border:1px solid #ccc;width:198px;height:240px;overflow:scroll;scroll-y;display:none;position: absolute; background-color:#fcfcfc;">
						<ul id="treeForMenu_edit" class="ztree"	style="margin-top: 0; width: 140px;"></ul>
  					</div>
  					<input type="hidden" id="selectMenu_edit" />
           		</div>
           		<div class="fitem">
                	<label>备注</label>
		        	<textarea style="height:70px;width:180px;" id="edit_remarks" name="remarks"></textarea>
           		</div>
			</div>
			<div style="padding-left:110px;padding-top:10px;">
				<a href="javascript:void(0);" id="editRole_btnOk" class="easyui-linkbutton" iconCls="icon-ok" >保存</a>
				<a href="javascript:void(0);" id="editRole_btnCancel" class="easyui-linkbutton" iconCls="icon-cancel" >取消</a>
			</div>
			</form>
	    </div>
	    
		</div>
</body>
</html>